<template>
  <div class="goods-li-item" @click="chose(goods.id)">
    <div class="pic">
      <img :src="goods.pic" />
    </div>
    <div class="desc">
      <div class="title">{{goods.title}}</div>
      <div class="sub-title">{{goods.subTitle}}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "goods-li",
  props: ['goods'],
  methods: {
    chose (id) {
      // 第一个参数是外部接收方法，第二个参数是当前选中的物品id
      // this.$emit是向外传递信息的方法
      this.$emit('chose-goods-item', id)
    }
  }
}
</script>
 
<style scoped>
.goods-li-item {
  display: flex;
}
.pic {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background: #8dc63f;
  overflow: hidden;
}
.desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: left;
  background: #39b54a;
  padding-left: 10px;
}
</style>